<template>
  <div class="picturePreview">
    <div class="pictureheader bg_style border_style ">
      <div class="search-all">
        <YsButton class="searchBtn" type="primary" @click="setFielBodyAll()">保存</YsButton>
        <YsButton class="searchBtn" @click="goOff()">返回</YsButton>
      </div>
    </div>
    <div class="picturebox bg_style border_style  " id="printMe" ref="print">
      <YsSpin fix v-if="dialog"></YsSpin>
      <one-template ref="oneTelDom" :templateBean="templateBean" :reportDataBean="reportDataBean"></one-template>
      <two-template ref="twoTelDom" :templateBean="templateBean" :reportDataBean="reportDataBean"></two-template>
      <div class="line-box border_style">
        <three-template ref="threeTelDom" :templateBean="templateBean" :reportDataBean="reportDataBean">
        </three-template>
        <four-template ref="fourTelDom" :templateBean="templateBean" :reportDataBean="reportDataBean"></four-template>
      </div>
    </div>
  </div>
</template>
<script>

import { mapActions } from "vuex";
import oneTemplate from "./components/oneTemplate.vue";
import TwoTemplate from "./components/twoTemplate.vue";
import ThreeTemplate from "./components/threeTemplate.vue";
import FourTemplate from "./components/fourTemplate.vue";



export default {
  name: 'photoQuery',
  components: {
    oneTemplate,
    TwoTemplate,
    ThreeTemplate,
    FourTemplate,

  },
  data() {
    return {

      dialog: false,
      templateBean: {},
      reportDataBean: {},
      changeBeans: {}
    }
  },
  mounted() {
    this.getFielBeanList()
  },
  methods: {
    ...mapActions(['getTemplateAllFieldAPI', "getviewFileReportDataAIP", "setFileReportFieldValChangedAPI", "getFileReportFieldsAPI"]),
    // 获取字段列表
    getFielBeanList() {

      // this.getTemplateAllFieldAPI({ template_id: this.$route.query.template_id }).then(res => {
      this.getFileReportFieldsAPI({ template_id: this.$route.query.template_id, file_id: this.$route.query.file_id }).then(res => {
        let { data, msg, scode, status } = res;

        if (status === "ok") {
          this.templateBean = data
          this.getFielBodyList()
        } else {
          this.templateBean = this.$options.data.templateBean
        }
      })
    },
    //获取body数据
    getFielBodyList() {
      this.dialog = true
      this.getviewFileReportDataAIP({ template_id: this.$route.query.template_id, file_id: this.$route.query.file_id }).then(res => {
        let { data, msg, scode, status } = res;
        this.dialog = false
        if (status === "ok") {
          this.reportDataBean = data.reportDataBean
        } else {
          this.reportDataBean = this.$options.data.reportDataBean
        }
      })
    },
    //修改内容
    setFielBodyAll() {
      this.$refs.oneTelDom.setPhotosItem()
      this.$refs.twoTelDom.getoPerateTel()
      this.$refs.threeTelDom.getoPerateImg()
      this.$refs.fourTelDom.setoperate()
      let oneTelDom = this.$refs.oneTelDom.operateTelData
      let twoTelDom = this.$refs.twoTelDom.operateTelData
      let threeTelDom = this.$refs.threeTelDom.operateTelData
      let fourTelDom = this.$refs.fourTelDom.operateTelData
      this.changeBeans = [...oneTelDom, ...twoTelDom, ...threeTelDom, ...fourTelDom]
      let reportInfo = {
        file_id: this.$route.query.file_id,
        tp_id: this.$route.query.template_id,
        report_code: this.$refs.oneTelDom.report_code
      }
      this.setFileReportFieldValChangedAPI({ changeBeans: this.changeBeans, reportInfo }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.$refs.oneTelDom.operateTelData = []
          this.$refs.twoTelDom.operateTelData = []
          this.$refs.threeTelDom.operateTelData = []
          this.$refs.fourTelDom.operateTelData = []
          this.getFielBeanList()
          this.$YsMessage.success(data.message_text);
        } else {
          this.$YsMessage.error(msg)
        }
      })
    },
    goOff() {
      this.$router.go(-1);
    }
  }

}
</script>

<style scoped lang='less'>
.picturePreview {

  // height: 100%;
  // overflow: hidden;
  .picturebox {
    border: 1px solid rgba(207, 215, 229, 0.6);
    border-radius: 4px;
    // height: calc(100% - 102px);
    padding: 40px 68px;

    .line-box {
      margin-top: 80px;
      border: 1px solid rgba(207, 215, 229, 0.6);
      padding: 18px;
    }
  }

  .pictureheader {
    margin-bottom: 8px;
    border-radius: 4px;
    border: 1px solid rgba(207, 215, 229, 0.6);
    display: flex;
    position: relative;

    .search-all {
      height: 72px;
      overflow: hidden;
      padding: 16px;
      margin-left: auto;

      .searchBtn {
        width: 80px;
        min-width: 80px;
        height: 40px;
        font-family: PingFang SC;
        margin-left: 16px;
      }
    }
  }
}
</style>